<template>
	<view class="pages" :style="$theme.pageStyle">
		<view class="invite-fans flex-col col-center">
			<image :src="imgPath" mode="widthFix" class="poster"></image>
			<invite-poster ref="poster" :options="options" @success="handleSuccess" />
			<view class="bg-white footer flex-1">
				<view class="m-b-40">
					<view class="m-b-10 sm lighter">{{$t('change.我的邀请码')}}</view>
					<view class="flex row-between">
						<view class="font-size-44">{{ code }}</view>
						<view class="sm m-r-30 copy-btn">{{$t('change.点击复制')}}</view>
					</view>
				</view>
				<!-- #ifndef H5  -->
				<button class="save-btn br60" size="lg" @tap="saveImageToAlbum">
					{{$t('change.保存到相册')}}
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class="save-btn br60" size="lg">{{$t('change.长按保存到相册')}}</button>
				<!-- #endif -->
			</view>
			<u-loading-page :loading="loading"></u-loading-page>
		</view>
	</view>
</template>

<script>
	import invitePoster from "@/lawyer/components/invite-poster/invite-poster.vue";
	import $H from '@/common/js/request.js';
	export default {
		components: {
			invitePoster,
		},
		data() {
			return {
				imgPath: "",
				loading: true,
				options: {},
				code: uni.getStorageSync("my_invite_code"),
				qr_code:''
			};
		},

		async onLoad() {
			this.ShereConfig();
		},

		methods: {

			async getPoster() {
				try {
					const res = await $H.post('share/MnpQrCode', {

					}, {
						token: true
					});
					this.qr_code = res.data.qr_code
				} catch (e) {
					// uni.showToast({
					// 	title: e,
					// 	icon:"none"
					// })
				}
			},
			
			async ShereConfig() {
				try {

					const res = await $H.post('share/getShereConfig', {
						
					}, {
						token: true
					});
					
					this.options = res.data
					
					// console.log(this.options)
					
					this.options.link = 'https://wwww.baidu.com';
					
					this.options.qr_code = this.options.qr_code
					
					this.$refs.poster.drawCanvas();
					
					// uni.hideLoading()
					
				} catch (e) {
					// uni.showToast({
					// 	title: e,
					// 	icon:"none"
					// })
				}
			},
			saveImageToAlbum() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.imgPath,
										success: function(res) {
											uni.showToast({
												title: "保存成功",
												icon: "none"
											})
										},
										fail: function(res) {
											uni.showToast({
												title: "保存失败",
												icon: "none"
											})
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.imgPath,
								success: function(res) {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									})
								},
								fail: function(res) {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									})
								}
							});
						}
					}
				});
			},
			handleSuccess(val) {
				this.imgPath = val;
				this.loading = false;
			},
		},
	};
</script>
<style lang="scss" scoped>
	page {
		padding: 0;
	}
	.flex-col {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	.col-center {
		align-items: center;
	}
	.flex-1 {
	    flex: 1;
	}
	.m-b-40 {
	    margin-bottom: 22px;
	}
	.m-b-10 {
	    margin-bottom: 5px;
	}
	.row-between {
	    justify-content: space-between;
	}
	.font-size-44 {
	    font-size: 24px;
	}
	.blue_theme .invite-fans .copy-btn {
	    color: var(--color-primary);
	}
	.sm {
	    font-size: 14px;
	}
	.lighter {
	    color: #666666;
	}
	.invite-fans {
		min-height: 100vh;
		overflow: hidden;

		.poster {
			width: 600rpx;
			margin: 40rpx 0;
		}

		.footer {
			padding: 30rpx;
			width: 100%;
		}

		.copy-btn {
			color: var(--color-primary);
		}

		.save-btn {
			color: #fff;
			background-color: var(--color-primary);
		}
	}
</style>